<template>
  <div class="entity-list-wrapper">
    <div class="entity-list-header">
      <span class="entity-list-title t1">{{ t('goodsCommerce_Package') }}</span>
    </div>
    <div class="entity-list-count" v-if="showTotalCount">
      <span class="entity-list-count-item">{{ t('goodsCommerce_total_price') }}{{ total }}</span>
      <span class="entity-list-count-item">{{ t('goodsCommerce_actually_paid') }}</span>
    </div>
    <div class="entity-goods-list">
      <entity-item v-for="goods in goodsList" :key="goods.sku_id" :goods="goods"></entity-item>
      <div class="entity-list-tips">
        <span v-if="virtualNum"> * {{t('goodsCommerce_received_once')}}</span>
        <span class="entity-stock" v-if="entityStock"> {{ t('goodsCommerce_get_sold_out') }}</span>
      </div>

    </div>
  </div>
</template>

<script>
import entityItem from './entityItem';
import { isELearnMP, isMP, isIos } from "../../utils/checkEnv";
import { getGoodsInfo } from '../../fetch-data';
import locale from "../../../../mixins/locale";

export default {
  name: 'entityGiftList',
  mixins: [locale],
  props: {
    // 知识商品数量
    virtualNum: {
      type: Number,
      default: 0
    },
    goodsInfo: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      goodsList: [],
      entityStock: false,
    }
  },
  components: {
    entityItem
  },
  computed: {
    total() {
      return (this.goodsList.reduce((total, good) => {
        return total + Number(good.sku_price);
      }, 0) / 100).toFixed(2)
    },
    showTotalCount() {
      // ios 小程序不显示
      return !(isIos && (isMP || isELearnMP))
    }
  },
  created() {
    this.getGoodsInfo();
  },
  methods: {
    getGoodsInfo() {
      const param = {
        resource_id: this.goodsInfo.resource_id,
        resource_type: this.goodsInfo.resource_type
      }
      getGoodsInfo(param).then(data => {
        this.goodsList = data.goods_list;
        this.goodsList.forEach(item => {
          if (item.sku_stock == "0") {
            this.entityStock = true;
          }
        });
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.entity-list-wrapper {
  flex: 1;
  padding: 0.32rem 0;
  margin: 0 auto;
  max-width: 480px;
  overflow: auto;
  background: #ffffff;
  border-radius: 0.32rem 0.32rem 0px 0px;

  .entity-list-header {
    position: relative;
    padding: 0 0.32rem;
    text-align: center;
    font-weight: 600;
  }

  .entity-stock {
    color: #FF781F;
    margin-top: 8px;
  }

  .entity-list-close {
    position: absolute;
    top: 0.1rem;
    right: 0.32rem;
    width: 0.24rem;
    height: 0.24rem;
    font-size: 0;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  .entity-list-count {
    padding: 0.4rem .32rem 0 .32rem;

    .entity-list-count-item {
      padding-right: 0.4rem;
    }
  }

  .entity-list-tips {
    display: flex;
    flex-direction: column;
    padding: 0.48rem 0 1.4rem;
    line-height: 0.36rem;
    text-align: center;
    font-size: 0.24rem;
    color: #999;
  }
}

.entity-goods-list {
  padding: 0.4rem .32rem 0 .32rem;
  height: 63.1vh;
  overflow: auto;
}
</style>
